<template>
  <div class="box jdlogin">
    <div class="header">
      <van-nav-bar
        title="京雷注册"
        left-arrow
        @click-left="$router.back()"
      />
    </div>
    <div class="conent">
      <van-form @submit="onSubmit" v-if="loginMethod">
        <van-field
          v-model="tel"
          name="tel"
          clearable
          placeholder="请输入手机号"
          :right-icon="telTip"
        >
        </van-field>
        <div style="margin: 16px;">
          <van-button round block type="danger" native-type="submit" :disabled = "submitctip">
            下一步
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Form, Field, Button, Dialog, Toast } from 'vant'
import { sendMsgR } from '../../api/index.js'

Vue.use(NavBar)
Vue.use(Form)
Vue.use(Field)
Vue.use(Button)
Vue.use(Dialog)
Vue.use(Toast)

export default {
  data () {
    return {
      sms: '',
      userName: '',
      passWord: '',
      loginMethod: true,
      iseye: false,
      tel: ''
    }
  },
  mounted () {
    Dialog.confirm({
      title: '注册协议及隐私政策',
      confirmButtonText: '同意',
      cancelButtonText: '不同意',
      confirmButtonColor: '#ffffff',
      messageAlign: 'left',
      message: '<p data-v-41dea4c0="">在您注册成为京东用户的过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议<span data-v-41dea4c0="" class="important-tip">请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体并下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）：</span></p>'
    })
      .then(() => {
      })
      .catch(() => {
        this.$router.back()
      })
  },
  methods: {
    onSubmit (val) {
      Dialog.confirm({
        confirmButtonColor: '#ffffff',
        messageAlign: 'left',
        message: '我们将发送短信验证码至:' + val.tel
      })
        .then(() => {
          sendMsgR({ tel: this.tel }).then(res => {
            console.log(res.data)
            switch (res.data.state) {
              case 201:
                Dialog.confirm({
                  confirmButtonColor: '#ffffff',
                  messageAlign: 'left',
                  message: '该手机号已被注册，请直接登录'
                }).then(() => {
                  this.$router.push('/login')
                }).catch(() => {
                  // on confirm
                })
                break
              case 200:
                Toast({
                  message: '验证码发送成功',
                  onClose: () => {
                    this.$router.push('/register?tel=' + val.tel)
                  }
                })
            }
          })
        })
        .catch(() => {
          // on confirm
        })
    }
  },
  computed: {
    telTip () {
      if (/^1[3-9]\d{9}$/.test(this.tel)) {
        return 'success'
      } else {
        return ''
      }
    },
    submitctip () {
      if (this.telTip) {
        return false
      } else {
        return true
      }
    }
  }
}
</script>

<style lang="scss">
.jdlogin{
  .header{
    .van-nav-bar__arrow{
      font-size: 24px;
      color: #000;
    }
    .van-nav-bar__title{
      font-szie: 18px
    }
    .van-hairline--bottom::after{
      border: none;
    }
  }
  .conent{
    .getsms{
      background: none;
      color: #888888;
      border: none;
      border-left: 1px solid #888888;
      width: 1rem;
      height: .23rem;
    }
    .van-field{
      height: .75rem;
    }
    .van-cell--center{
      align-items: flex-end;
    }
    .van-cell__value{
      display: flex;
      align-items: flex-end;
    }
    .van-field__body{
      width: 100%;
    }
    .loginMethod{
      display: flex;
      justify-content: space-between;
      padding: .1rem .2rem;
      color: #888888;
    }
    .van-divider{
      margin-top: 1rem;
    }
  }
}
.van-dialog__confirm{
    background: #ff2000;
  }
</style>
